import { api } from "@/api";
import BannerPage from "@/components/page/BannerPage";
import routes from "@/router/routes";
import { convertImgUrl } from "@/utils/MyFun";
import { formateDate } from "@/utils/common";
import { Icon } from "@iconify/react";
import { Card, Col, Row } from "antd";
import { cloneDeep } from "lodash";
import { useEffect, useState } from "react";
import {
  Link,
  useLocation,
  useParams,
  useRoutes,
  useSearchParams,
} from "react-router-dom";
import styled from "styled-components";

const Styled = styled.div`
  .ant-card-body {
    padding: 0;
  }
  .ctx {
    width: 100%;
  }
  .img-box {
    width: 100%;
    height: 55rem;
    overflow: hidden;
    &:hover {
      img {
        transform: scale(1.1);
      }
    }
    img {
      transition: all 600ms;
      height: 100%;
      width: 100%;
    }
  }
  .title {
    color: #333;
    p {
      padding: 3px 10px;
      font-size: 24px;
    }
  }
  .time-category {
    padding: 3px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left,
    .right {
      display: flex;
      align-items: center;
      font-size: 17px;
      span {
        margin-left: 5px;
      }
    }
  }
  hr {
    border-width: 1px;
    border-style: solid;
    border-radius: 1rem;
    height: 0.25rem;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
  }
  .tags {
    padding: 5px 10px;
    display: flex;
    align-items: center;
    span {
      border-radius: 15px;
      display: inline-block;
      transition-property: color, background-color, border-color,
        text-decoration-color, fill, stroke, opacity, box-shadow, transform,
        filter, backdrop-filter;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      transition-duration: 500ms;
      color: rgba(255, 255, 255, 1);
      font-size: 3rem;
      padding-top: 0.75rem;
      padding-bottom: 0.75rem;
      padding-left: 3rem;
      padding-right: 3rem;
      background-image: linear-gradient(
        to right,
        rgba(74 222 128),
        rgb(59 130 246)
      );
      &:not(:first-child) {
        margin-left: 3px;
      }
      &:hover {
        cursor: pointer;
        transform: scale(1.1);
        background-image: linear-gradient(
          to right,
          rgb(236 72 153),
          rgb(234 179 8)
        );
      }
    }
  }
`;

const new_routes = cloneDeep(routes);
const ArticleList = () => {
  const params = useParams();
  const [usp] = useSearchParams();
  const [loading, setLoading] = useState(true);
  const [articleList, setArticleList] = useState([]);
  const [name, setName] = useState(usp.get("name"));

  let r = useRoutes(new_routes).props.routeContext.matches[0].route;

  useEffect(() => {
    (async () => {
      const res = await api.getArticles({
        category_id: params?.categoryId,
        tag_id: params?.tagId,
      });
      setArticleList(res.data);
      setLoading(false);
    })();
  }, []);

  return (
    <Styled>
      <BannerPage
        loading={loading}
        label="article_list"
        title={`${r.meta?.title} - ${name}`}
      >
        <Row gutter={15}>
          {articleList.map((item) => {
            return (
              <Col
                key={item.id}
                xs={24}
                lg={12}
                xl={8}
                style={{ marginTop: "2rem" }}
              >
                <Card>
                  <div
                    className="ctx"
                    style={{ borderRadius: "5px", overflow: "hidden" }}
                  >
                    {/* 图片 */}
                    <div className="img-box">
                      <Link to={`/article/${item.id}`}>
                        <img src={convertImgUrl(item.img)} alt="" />
                      </Link>
                    </div>
                    {/* 内容 */}
                    <div>
                      <Link className="title" to={`/article/${item.id}`}>
                        <p>{item.title}</p>
                      </Link>
                      <p className="time-category">
                        <span className="left">
                          <Icon icon="mingcute:time-line" />
                          <span>{formateDate(item.created_at)}</span>
                        </span>
                        <Link
                          to={`/categories/${item.category_id}?name=${item.category_name}`}
                        >
                          <span className="right">
                            <Icon icon="heroicons:tag-20-solid" />
                            <span>{item.category_name}</span>
                          </span>
                        </Link>
                      </p>
                      {/* 分割线 */}
                      <hr />
                      {/* 标签 */}
                      <p className="tags">
                        {item.tags.map((tag) => {
                          return <span key={tag}>{tag}</span>;
                        })}
                      </p>
                    </div>
                  </div>
                </Card>
              </Col>
            );
          })}
        </Row>
      </BannerPage>
    </Styled>
  );
};

export default ArticleList;
